<template>
  <div class="chat-container">
    <div class="headers">
      睡前故事会
    </div>
    <!-- 工具栏：按钮统一样式和颜色 -->
    <!-- <div class="toolbar">
      <t-button
        variant="primary"
        icon="share"
        @click="openShareDialog"
        shape="round"
        class="toolbar-button"
      >
        分享
      </t-button>
      <t-button
        variant="primary"
        icon="download"
        @click="downloadConversation"
        shape="round"
        class="toolbar-button"
      >
        导出
      </t-button>
      <t-button
        variant="primary"
        icon="theme"
        @click="$toggleTheme()"
        shape="round"
        class="toolbar-button"
      >
        切换主题
      </t-button>
    </div> -->

    <t-chat
      ref="chatRef"
      layout="single"
      class="chat-window"
      :clear-history="chatList.length > 0 && !isStreamLoad"
      @clear="clearConfirm"
    >
      <template v-for="(item, index) in chatList" :key="index">
        <t-chat-item
          :avatar="item.avatar"
          :name="item.name"
          :role="item.role"
          :datetime="item.datetime"
          :text-loading="index === 0 && loading"
        >
          <template #content>
            <div
              :class="['chat-bubble', item.role === 'user' ? 'user-bubble' : 'assistant-bubble']"
              v-html="item.content"
            ></div>
          </template>
          <template v-if="!isStreamLoad" #actions>
            <t-chat-action
              :is-good="isGood[index]"
              :is-bad="isBad[index]"
              @operation="(type, { e }) => handleOperation(type, { e, index })"
              class="feedback-action"
            />
          </template>
        </t-chat-item>
      </template>

      <template #footer>
        <div class="input-area">
          <t-chat-input
            :stop-disabled="isStreamLoad"
            @send="inputEnter"
            @stop="onStop"
            placeholder="请输入您的问题..."
          />
          <t-button
            v-if="isStreamLoad"
            @click="onStop"
            type="danger"
            icon="close"
            circle
            class="stop-button"
          />
        </div>
      </template>
    </t-chat>

    <!-- 反馈表单对话框 -->
    <t-dialog
      v-model:visible="showFeedbackForm"
      :mask-closable="false"
      :show-close="false"
      width="450px"
      class="feedback-dialog"
    >
      <div class="feedback-content">
        <t-textarea
          v-model="feedbackContent"
          placeholder="您的宝贵建议对我们非常重要！您的反馈将帮助我们持续改进！"
          :rows="4"
          class="feedback-textarea"
        />
      </div>
      <template #footer>
        <t-button type="primary" @click="submitFeedback">提交反馈</t-button>
      </template>
    </t-dialog>

    <!-- 分享对话框 -->
    <t-dialog
      v-model:visible="showShareDialog"
      title="分享对话"
      :mask-closable="false"
      :show-close="false"
      width="400px"
      class="share-dialog"
    >
      <div class="share-options">
        <t-button
          variant="outline"
          icon="wechat"
          @click="shareToWeChatFriends"
          class="share-button"
        >
          微信好友
        </t-button>
        <t-button
          variant="outline"
          icon="wechat-moments"
          @click="shareToWeChatMoments"
          class="share-button"
        >
          朋友圈
        </t-button>
        <t-button
          variant="outline"
          icon="weibo"
          @click="shareToWeibo"
          class="share-button"
        >
          微博
        </t-button>
        <t-button
          variant="outline"
          icon="qq"
          @click="shareToQQZone"
          class="share-button"
        >
          QQ空间
        </t-button>
      </div>
    </t-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { saveAs } from 'file-saver';

// 反馈表单相关的状态
const showFeedbackForm = ref(false);
const feedbackType = ref(null); // 'good' 或 'bad'
const currentFeedbackIndex = ref(null);
const feedbackContent = ref('');

// 分享对话框相关的状态
const showShareDialog = ref(false);

// 滚动到底部
const chatRef = ref(null);
const backBottom = () => {
  chatRef.value.scrollToBottom({
    behavior: 'smooth',
  });
};

// 初始化聊天记录，仅保留初始机器人问候
const chatList = ref([
  {
    avatar: 'https://lingjing-online.cdn.bcebos.com/v1/lingjing-online/agent_logo/2025-01-24/8cad7ca8-1288-44a6-81dc-dcf079524c3b.png?x-bce-process=image/format,f_webp', // 小美的头像链接
    name: '睡前故事会',
    datetime: new Date().toLocaleString(),
    content: '嗨，小朋友，准备好进入一个梦幻的故事世界了吗？',
    role: 'assistant',
  },
]);

// 初始化 isGood 和 isBad 数组
const isGood = ref([]);
const isBad = ref([]);

const initializeFeedbackStates = () => {
  isGood.value = chatList.value.map(() => false);
  isBad.value = chatList.value.map(() => false);
};

initializeFeedbackStates();

const fetchCancel = ref(null);
const loading = ref(false);
const isStreamLoad = ref(false);

/**
 * Clears the confirmation by resetting the chat list to an empty array.
 */
const clearConfirm = function () {
  chatList.value = [];
  initializeFeedbackStates();
};

/**
 * Handles the stop event for a fetch operation.
 */
const onStop = function () {
  if (fetchCancel.value) {
    fetchCancel.value.abort();
    loading.value = false;
    isStreamLoad.value = false;
  }
};

/**
 * Handles different types of operations based on the provided type and options.
 */
const handleOperation = function (type, options) {
  const { index } = options;
  if (type === 'good') {
    isGood.value[index] = !isGood.value[index];
    if (isGood.value[index]) {
      isBad.value[index] = false;
      // 打开反馈表单
      feedbackType.value = 'good';
      currentFeedbackIndex.value = index;
      showFeedbackForm.value = true;
    }
  } else if (type === 'bad') {
    isBad.value[index] = !isBad.value[index];
    if (isBad.value[index]) {
      isGood.value[index] = false;
      // 打开反馈表单
      feedbackType.value = 'bad';
      currentFeedbackIndex.value = index;
      showFeedbackForm.value = true;
    }
  }
};

/**
 * 提交反馈表单
 */
const submitFeedback = () => {
  if (currentFeedbackIndex.value === null) {
    MessagePlugin.error('未找到对应的消息！');
    return;
  }

  // 显示固定成功消息
  MessagePlugin.success('感谢您的反馈，我们将持续改进！');

  // 关闭反馈表单
  showFeedbackForm.value = false;
};

/**
 * 打开分享对话框
 */
const openShareDialog = () => {
  showShareDialog.value = true;
};

/**
 * 分享到微信好友
 */
const shareToWeChatFriends = () => {
  // 实现分享到微信好友的逻辑
  MessagePlugin.success('分享到微信好友成功！');
  showShareDialog.value = false;
};

/**
 * 分享到朋友圈
 */
const shareToWeChatMoments = () => {
  // 实现分享到朋友圈的逻辑
  MessagePlugin.success('分享到朋友圈成功！');
  showShareDialog.value = false;
};

/**
 * 分享到微博
 */
const shareToWeibo = () => {
  // 实现分享到微博的逻辑
  MessagePlugin.success('分享到微博成功！');
  showShareDialog.value = false;
};

/**
 * 分享到QQ空间
 */
const shareToQQZone = () => {
  // 实现分享到QQ空间的逻辑
  MessagePlugin.success('分享到QQ空间成功！');
  showShareDialog.value = false;
};

/**
 * Handles the asynchronous processing of user input data.
 */
const handleData = async (inputValue) => {
  loading.value = true;
  isStreamLoad.value = true;
  const lastItem = chatList.value[0];
  const messages = [{
    role: 'user',
    content: inputValue,
  }];
  fetchSSE(messages, {
    success(result) {
      loading.value = false;
      const { data } = result;
      lastItem.content += data?.delta?.content;
    },
    complete(isOk, msg) {
      if (!isOk || !lastItem.content) {
        lastItem.role = 'error';
        lastItem.content = msg;
      }
      // 控制终止按钮
      isStreamLoad.value = false;
      loading.value = false;
    },
    cancel(cancel) {
      fetchCancel.value = cancel;
    },
  });
};

/**
 * Handles the input when the enter key is pressed.
 */
const inputEnter = function (inputValue) {
  if (isStreamLoad.value) {
    return;
  }
  if (!inputValue) return;
  const params = {
    avatar: 'https://lingjing-online.cdn.bcebos.com/v1/lingjing-online/agent_logo/2024-12-01/bdccfe0c-cefa-4b8a-8fcd-298181e18b7c.png', // 用户的头像链接
    name: '您',
    datetime: new Date().toLocaleString(),
    content: inputValue,
    role: 'user',
  };
  chatList.value.unshift(params);
  // 空消息占位
  const params2 = {
    avatar: 'https://lingjing-online.cdn.bcebos.com/v1/lingjing-online/agent_logo/2025-01-24/8cad7ca8-1288-44a6-81dc-dcf079524c3b.png?x-bce-process=image/format,f_webp', // 小美的头像链接
    name: '睡前故事会',
    datetime: new Date().toLocaleString(),
    content: '',
    role: 'assistant',
  };
  chatList.value.unshift(params2);
  isGood.value.unshift(false);
  isBad.value.unshift(false);
  handleData(inputValue);
};

/**
 * 解析SSE数据
 */
const fetchSSE = async (messages, options) => {
  const { success, fail, complete, cancel } = options;
  const controller = new AbortController();
  const { signal } = controller;
  cancel?.(controller);
  // your-api-key
  // const apiKey = 'sk-6R0hq8U7v3bSbT1u41Lp6kPRwAgf9wnW73WgvSC7WUI73eRO'; //混元模型的key
  const apiKey="S8DOQAPSFBQA6VRH9ECULPNM1BKZTCQBRGLLJWR0";   //gitee ai 的key
  const responsePromise = fetch('/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer${apiKey ? ` ${apiKey}` : ''}`,
    },
    body: JSON.stringify({
      messages, // 消息列表
      // model: 'hunyuan-pro', // 混元模型
      model:"DeepSeek-R1-Distill-Qwen-14B",
      stream: true, // 流式
    }),
    signal,
  }).catch((e) => {
    const msg = e.toString() || '流式接口异常';
    complete?.(false, msg);
    return Promise.reject(e); // 确保错误能够被后续的.catch()捕获
  });

  responsePromise
    .then((response) => {
      if (!response?.ok) {
        complete?.(false, response.statusText);
        fail?.();
        throw new Error('Request failed'); // 抛出错误以便链式调用中的下一个.catch()处理
      }
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      if (!reader) throw new Error('No reader available');

      const bufferArr = [];
      let dataText = ''; // 记录数据
      const event = { type: null, data: null };

      async function processText({ done, value }) {
        if (done) {
          complete?.(true);
          return Promise.resolve();
        }
        const chunk = decoder.decode(value);
        const buffers = chunk.toString().split(/\r?\n/);
        bufferArr.push(...buffers);
        let i = 0;
        while (i < bufferArr.length) {
          const line = bufferArr[i];
          if (line) {
            dataText += line;
            const response = line.slice(6);
            if (response === '[DONE]') {
              event.type = 'finish';
              dataText = '';
            } else {
              try {
                const choices = JSON.parse(response.trim())?.choices?.[0];
                if (choices.finish_reason === 'stop') {
                  event.type = 'finish';
                  dataText = '';
                } else {
                  event.type = 'delta';
                  event.data = choices;
                }
              } catch (error) {
                console.error('解析错误:', error);
              }
            }
          }
          if (event.type && event.data) {
            const jsonData = { ...event };
            success(jsonData);
            event.type = null;
            event.data = null;
          }
          bufferArr.splice(i, 1);
        }
        return reader.read().then(processText);
      }

      return reader.read().then(processText);
    })
    .catch(() => {
      // 处理整个链式调用过程中发生的任何错误
      fail?.();
    });
};

/**
 * 下载对话记录
 */
const downloadConversation = () => {
  const conversation = chatList.value
    .map((msg) => {
      const time = new Date(msg.datetime).toLocaleString();
      // 去除HTML标签，确保文本格式清晰
      const content = msg.content.replace(/<[^>]+>/g, '');
      return `[${time}] ${msg.name} (${msg.role}): ${content}`;
    })
    .reverse() // 反转以按时间顺序排列
    .join('\n\n');

  const blob = new Blob([conversation], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, 'conversation.txt');
};

/**
 * 分享对话记录（打开分享对话框）
 */
const shareConversation = async () => {
  openShareDialog();
};
</script>

<style lang="less" scoped>
/* 隐藏主题切换时的遮罩层 */
.t-dialog-mask, /* 可能的遮罩层类名 */
.theme-mask {
  display: none !important;
}

/* 新的整体容器样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding:0 30px;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.headers{
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: left;
  background: #fff;
  color: #333;

}
/* 工具栏样式更新，按钮统一样式和颜色 */
.toolbar {
  display: flex;
  justify-content: flex-end; /* 按钮靠右排列 */
  gap: 15px;
  margin-bottom: 25px;
}

.toolbar-button {
  background-color: #bae7ff;
  font-size: 16px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 聊天窗口样式优化 */
.chat-window {
  flex: 1;
  border: none;
  border-radius: 16px;
  background-color: transparent;
  background-color: rgba(211, 211, 211, 0.5);  box-shadow: 0 8px 24px rgba(197, 235, 28, 0.1);
  overflow: hidden;
}

/* 聊天气泡的通用样式 */
.chat-bubble {
  max-width: 65%;
  padding: 16px 22px;
  border-radius: 30px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  word-break: break-word;
  font-size: 16px;
  line-height: 1.5;
}

/* 用户消息气泡 */
.user-bubble {
  background-color: #bae7ff; /* 更清新的蓝色 */
  align-self: flex-end;
  border-top-right-radius: 0;
}

/* 助手消息气泡 */
.assistant-bubble {
  background-color: #d9f7be; /* 柔和的绿色 */
  align-self: flex-start;
  border-top-left-radius: 0;
}

/* 反馈按钮样式修改 */
.feedback-action {
  display: flex;
  gap: 10px;
}

.feedback-action .t-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

.feedback-action .t-button:hover {
  background-color: rgba(24, 144, 255, 0.1);
}

.active-good {
  color: #52c41a; /* 赞按钮选中时的绿色 */
}

.active-bad {
  color: #ff4d4f; /* 踩按钮选中时的红色 */
}

/* 调整聊天底部布局 */
.input-area {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
}

/* 停止按钮样式 */
.stop-button {
  background-color: #ff4d4f;
  border: none;
  width: 40px;
  height: 40px;
}

/* 更新后的反馈表单对话框样式 */
.feedback-dialog {
  .t-dialog__header {
    background-color: #1890ff; /* 蓝色头部 */
    color: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    font-size: 18px;
  }

  .t-dialog__body {
    padding: 25px;
    background-color: #f0f5ff; /* 淡蓝色背景 */
  }

  .t-dialog__footer {
    background-color: #f0f5ff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

.feedback-content p {
  margin-bottom: 14px;
  font-size: 17px;
}

.feedback-content strong {
  color: #60b1fd;
}

.feedback-textarea {
  width: 100%;
  border: 1px solid #1890ff;
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.feedback-textarea:hover,
.feedback-textarea:focus {
  border-color: #40a9ff;
}

/* 分享对话框样式 */
.share-dialog {
  .t-dialog__header {
    background-color: #40a9ff; /* 蓝色头部 */
    color: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    font-size: 18px;
    text-align: center;
  }

  .t-dialog__body {
    padding: 20px;
    background-color: #a8def7; /* 淡蓝色背景 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .share-dialog__footer {
    display: none; /* 移除对话框底部 */
  }
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  padding: 10px 0;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
}

.share-button:hover {
  background-color: rgba(24, 144, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-container {
    padding: 20px;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .chat-bubble {
    max-width: 80%;
  }

  .feedback-dialog,
  .share-dialog {
    width: 90% !important;
  }

  .toolbar-button {
    font-size: 14px;
    padding: 6px 12px;
  }

  .chat-bubble {
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 15px;
  }

  .feedback-content p {
    font-size: 16px;
  }

  .feedback-textarea {
    padding: 10px;
    font-size: 15px;
  }

  .share-button {
    font-size: 14px;
    padding: 8px 0;
  }
}
</style>
